<template>
	<el-row v-loading="loading" justify="space-between" class="globalHeader">
		<el-col :span="20">
			<el-menu :default-active="activeMenu" class="el-menu-demo" mode="horizontal" :ellipsis="true" router>
				<el-menu-item @click="router.push('/questions')">
					<div class="title-bar">
						<img class="logo" src="@/assets/oj.png" alt="" />
						<div class="title">LOJ</div>
					</div>
				</el-menu-item>
				<el-menu-item v-for="item in filterRoutesWithoutChildren" :index="item.path" :key="item.path" @click="handleMenu(item)">{{
					item.name
				}}</el-menu-item>
				<template v-if="userStore.loginUser?.userName === '小OJ'">
					<el-sub-menu v-for="item in filterRoutesWithChildren" :index="item.path" :key="item.path">
						<template #title>
							{{ item.name }}
						</template>
						<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" @click="handleMenu(child)">{{
							child.name
						}}</el-menu-item>
					</el-sub-menu>
				</template>
				<template v-else>
					<el-sub-menu>
						<template #title>user</template>
						<el-menu-item @click="loginOut">LoginOut</el-menu-item>
					</el-sub-menu>
				</template>
			</el-menu>
		</el-col>
		<el-col :span="4">
			<div class="user-info">
				<div class="avatar">
					{{ userStore.loginUser?.userName.slice(-1) || "OJ" }}
				</div>
				<div class="user">
					{{ userStore.loginUser?.userName || "小OJ" }}
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<script setup>
import { computed, ref } from "vue";
import useUserStore from "@/stores/user";
import checkAccess from "@/access/checkAccess";
import { useRoute, useRouter } from "vue-router";
import { userLogout } from "@/api/user";
import { ElMessage, ElMessageBox } from "element-plus";
import accessAuth from "@/access/accessAuth";

const router = useRouter();
const userStore = useUserStore();
const route = useRoute();

const filterRoutes = computed(() => {
	return router.getRoutes().filter(item => {
		if (item?.meta?.hide === true) {
			return false;
		}
		return checkAccess(userStore.loginUser, item?.meta?.access);
	});
});

const filterRoutesWithChildren = computed(() => {
	return filterRoutes.value.filter(item => {
		return item.children && item.children.length > 0;
	});
});

const filterRoutesWithoutChildren = computed(() => {
	return filterRoutes.value.filter(item => {
		return !item.path.includes("/user");
	});
});

const activeMenu = computed(() => route.path);
const handleMenu = item => {
	router.push(item.path);
};
const loading = ref(false);
const loginOut = async () => {
	ElMessageBox.confirm("您确定要退出系统吗？", {
		confirmButtonText: "退出",
		cancelButtonText: "取消",
		type: "warning"
	})
		.then(async () => {
			await userLogout();
			const userStore = useUserStore();
			userStore.updateUser({
				userName: "小OJ",
				access: accessAuth.NOT_LOGIN
			});
			ElMessage({
				type: "success",
				message: "退出成功！我会想你的！"
			});
			router.push("/user/login");
		})
		.catch(() => {
			ElMessage({
				type: "success",
				message: "嘿嘿，你做了一个正确的选择！"
			});
		});
};
// setTimeout(() => {
//   userStore.getLoginUser({ userName: "admin", userRole: "admin" });
// }, 3000);
</script>

<style scoped lang="scss">
.globalHeader {
	display: flex;
	height: 60px;
	background-color: #a9c1ee;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
	.title-bar {
		display: flex;
		align-items: center;
	}
	.el-menu {
		background-color: #a9c1ee;
	}
	.el-menu-item,
	.el-sub-menu {
		width: 150px;
	}

	.el-sub-menu {
		display: flex;
		justify-content: space-around;
	}

	.title {
		color: #444;
		margin-left: 26px;
	}
	.logo {
		height: 48px;
	}
	.user-info {
		height: 60px;
		display: flex;
		margin-right: 5px;
		justify-content: end;
		.avatar {
			position: relative;
			top: 20%;
			margin-right: 5px;
			width: 40px;
			height: 40px;
			border-radius: 20px;
			text-align: center;
			line-height: 40px;
			background-color: #42b983;
			cursor: pointer;
		}
		.user {
			height: 60px;
			text-align: right;
			line-height: 60px;
		}
	}
}
</style>
<style>
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
	min-width: 120px !important;
}
</style>
